<template>
  <div class="label-type">
    <div class="history-task-container">
      <div class="search-container">
        <div class="search-input" v-role="'A040301002'">
          <el-input
            v-model="model.name"
            placeholder="标注工具"
            :prefix-icon="Search"
            style="width: 272px; margin-right: 24px"
            clearable
          />
          <el-button @click="reset">重置</el-button>
          <el-button @click="search" type="primary">查询</el-button>
        </div>
      </div>
      <div class="content">
        <div class="title-info">
          <div class="title">标注工具列表</div>
          <!-- <el-button type="primary" :icon="Plus" @click="edit" v-role="'A040301003'">新建</el-button> -->
        </div>
          <el-table
            v-role="'A040301001'"
            :data="tableList"
            style="width: 100%"
            stripe
            class="define-el-table"
          >
            <el-table-column type="index" label="序号" width="240" />
            <el-table-column label="编码" >
              <template #default="scope">
                <span>{{ scope.row.value }}</span>
              </template>
            </el-table-column>
            
            <el-table-column label="名称" >
              <template #default="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>

            <el-table-column label="说明" >
              <template #default="scope">
                <span>{{ scope.row.remark }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="操作"
              width="320">
              <template #default="scope">
                <el-button
                    @click="edit(scope.row, scope.$index)"
                    type="text"
                    v-role="'A040301004'"
                >编辑
                </el-button>
                
              </template>
            </el-table-column>
          </el-table>
          <div
            class="el-pagination-container"
            style="display: flex; justify-content: flex-end"
          >
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100, 500]"
              layout="prev, pager, next, sizes"
              :total="2"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
      </div>
    </div>


    
    
    <!-- 编辑标注工具 -->
    <el-dialog
      v-model="editVisible" 
      title="编辑标注工具"
      width="780px"
      class="define-el-dialog"
    >
      <div class="content">
        <el-form :model="editModel" ref="formRef" :rules="rules" label-width="68px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="editModel.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="编码" prop="value">
            <el-input v-model="editModel.value" disabled />
          </el-form-item>
          <el-form-item label="说明">
            <el-input v-model="editModel.remark" placeholder="请输入" />
          </el-form-item>

        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm(formRef)">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script lang="ts" setup>
//@ts-noCheck
  import { ref, reactive, onMounted } from 'vue';
  // import SysNotice from '@/components/sys-notice/index.vue';
  import NavBar from '@/components/navbar/index.vue';
  import { useAppStore, useUserStore } from '@/store';
  import ill from '@/assets/images/ill.png';
  import { Warning, Plus, Search, Delete } from '@element-plus/icons-vue';
  import { formatDateTime } from '@/utils/date';
  import NewTaskList from '@/views/doctor/components/NewTaskList.vue';
  import { taskSeriesSearch, userTaskSearch } from '@/api/doctor/doctor';
  import {
    TaskSeriesSearchList,
    TaskSeriesSearchModel,
    UserTaskSearchList,
    UserTaskSearchModel,
  } from '@/api/doctor/doctor.d';
  import {
    toolSearch, 
    lesionMaxCode,
    configLesion,
    toolEdit,
  } from '@/api/configCenter/configCenter';
  import type { FormInstance, FormRules } from 'element-plus';
  import { Message } from '@arco-design/web-vue';

  onMounted(()=>{
    setTableList();
  })
  
  /**
   * 所有任务 搜索
   */
  const tableList = ref([]);
  const currentPage = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const model = reactive({
    name: '',
    page: currentPage.value,
    pageSize: pageSize.value,
  });
  
  const setTableList = async ()=> {
    const _model = {
      ...model,
      page: currentPage.value,
      pageSize: pageSize.value,
    };
    const res = await toolSearch(_model);
    tableList.value = res?.data?.list || [];
    total.value = res?.data?.total || 0;
  }

  const reset = ()=> {
    model.name = '';
  }
  const search = () => {
    currentPage.value = 1;
    setTableList();
  };
  /**
   * 分页
   */
  const handleSizeChange = (size) => {
    pageSize.value = size;
    setTableList();
  };
  const handleCurrentChange = (page) => {
    currentPage.value = page;
    setTableList();
  };


    /**
      新建标注类型
    */
  const editVisible = ref(false);
  const edit = (item, index) => {
    editModel.id = item.id;
    editModel.name = item.name;
    editModel.value = item.value;
    editModel.remark = item.remark;
    editVisible.value = true;
  };
  const editModel = reactive({
    id: '',
    name: '',
    value: '',
    remark: '',
  });
  
  const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入', trigger: 'blur'}],
    value: [{ required: true, message: '请输入', trigger: 'blur'}],
  });
  const formRef = ref<FormInstance>();
  const confirm = (formEl: FormInstance | undefined)=> {
    if (!formEl) return;
    formEl.validate(async (valid) => {
      if( !valid ) return;
      await toolEdit(editModel);
      clear();
      setTableList();
    })
  }
  const cancel = ()=> {
    editVisible.value = false;
  };
  const clear = ()=> {
    editVisible.value = false;
    editModel.id = "";
    editModel.name = "";
    editModel.remark = "";
  }

</script>


<style lang="less">
.label-type{
  background-color: #f5f5f5;
  padding: 20px;
  .history-task-container {
      .text-info {
        font-size: 16px;
        color: #333;
        font-style: normal;
        font-weight: 700;
        margin-bottom: 20px;
      }
      .search-container {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        background-color: #fff;
        padding: 20px;
        .buttons-container {
          background-color: #fff;
        }
      }
      .content{
        padding: 20px 57px 20px 20px;
        background-color: #fff;
        .title-info{
          display: flex;
          justify-content: space-between;
          .title{
            font-style: normal;
            font-weight: 700;
            font-size: 16px;
            color: #333333;
            margin-bottom: 20px;
          }
        }
        
        .el-table {
          margin-top: 10px;
        }
        .el-table thead tr th,
        .el-table tbody tr td {
          text-align: left;
        }
        .el-table thead tr th {
          background-color: #fff;
        }
        .el-table__body tr {
          cursor: pointer;
        }
      }
      
    }
}

.define-el-dialog{
  .content{
    padding: 20px 100px 0 110px;
    .lesions-group-container{
      padding: 0 0 0 24px;
      .icon-handle{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        &>div{
          width: 32px;
          height: 32px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        .el-icon{
          color: #448E97;
          font-size: 16px;
        }
      }
    }
  }      
}
</style>